<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-left iconfont" @tap="back">
				&#xe614;
			</view>
		</view>
		<view class="logo">
			<image src="../../static/img/zchat.png"></image>
		</view>
		<view class="main">
			<view class="title">注册</view>
			<view class="inputs">
				<view class="input-div">
					<input type="text" placeholder="请输入账号" placeholder-style="color:#aaa;font-weight:300;font-size:26rpx;" @blur="getUser">
					<text class="att" v-if="uatt">不能为空</text>
					<text class="att" v-if="uatts">用户名已存在</text>
					<image src="../../static/img/gou.png" class="is" v-if="isu"></image>
				</view>
				<view class="input-div">
					<input :type="passwordtype" placeholder="请输入密码" placeholder-style="color:#aaa;font-weight:300;font-size:26rpx;" @input="getPwd">
					<text class="att" v-if="patt">密码不能为空</text>
					<image src="../../static/img/gou.png" v-if="isp" class="is"></image>
					
				</view>
				<view class="input-div">
					<input :type="passwordtype" placeholder="请再次输入密码" placeholder-style="color:#aaa;font-weight:300;font-size:26rpx;" @blur="getPwds">
					<text class="att" v-if="psatt">两次密码不一致</text>
					<image src="../../static/img/gou.png" v-if="isps" class="is"></image>
				</view>
				<text v-if="look" class="look" @tap="looks">隐藏密码</text>
				<text v-if="!look" class="look" @tap="looks">显示密码</text>
			</view>
		</view>
		<view class="submit" @tap="register">注册</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				passwordtype: 'password',
				isu: false, //用户名正确
				isp: false, //第一次密码正确
				isps: false, //第二次密码正确
				look: false ,//是否显示密码
				uatt: false ,//用户名不能为空
				uatts: false,//用户已存在
				patt: false ,//提示
				psatt: false, //提示
				user: '',//注册用户名
				pwds: '',//第一次密码
				pwd: ''//注册密码
			}
		},
		methods: {
			//注册密码显示与隐藏
			looks: function() {
				if(this.look) {
					this.passwordtype = 'password'
					this.look = !this.look
				} else {
					this.passwordtype = 'text'
					this.look = !this.look
				}
			},
			//返回登录页
			back: function() {
				uni.navigateBack({
					delta: 1
				})
			},
			//获取并验证账号
			getUser: function(e) {
				this.isu = false
				this.uatt = false
				this.uatts = false
				this.user = e.detail.value
				if(this.user.length>0){
					uni.request({
						url: this.baseURL + '/register/judge',
						data: {
							name: this.user
						},
						method: 'POST',
						success: (data) => {
							let status = data.data.status
							if(status === 200) {
								let result = data.data.result
								if(result>0){
									//用户已存在
									this.uatts = true
									this.isu = false
								}else{
									this.uatts = false
									this.isu = true
								}
							}else if(status === 500){
								uni.showToast({
									title: '服务器发生错误!',
									icon: 'none',
									duration: 2000
								})
							}
						}
					})
				}
				if(e.detail.value === '') {
					this.uatt = true
				} else {
					this.uatt = false
					this.isu = true
					this.user = e.detail.value
				}
			},
			//获取密码
			getPwd: function(e) {
				this.isp = false
				if(e.detail.value === '') {
					this.patt = true
				} else {
					this.patt = false
					this.isp = true
					this.pwds = e.detail.value
				}
			},
			//获取并验证二次密码
			getPwds: function(e) {
				this.isps = false
				if(e.detail.value !== this.pwds) {
					this.psatt = true
				} else if(e.detail.value === ''){
					this.isps = false
				}else{
					this.psatt = false
					this.isps = true
					this.pwd = e.detail.value
				}
			},
			register: function() {
				if(this.isu === true && this.isp === true && this.isps === true) {
					uni.request({
						url: this.baseURL + '/register/add',
						data: {
							name: this.user,
							pwd: this.pwd
						},
						method: 'POST',
						success: (data) => {
							let status = data.data.status
							if(status === 200) {
								//注册成功跳到登录页
								setTimeout(()=>{
									uni.navigateTo({
										url: '../login/login?user='+this.user
									})
								},2000)
								uni.showToast({
									title: '注册成功,两秒后返回登录页!',
									icon: 'none',
									duration: 2000
								})
							}else if(status === 500){
								uni.showToast({
									title: '服务器发生错误!',
									icon: 'none',
									duration: 2000
								})
							}
						}
					})
				}else{
					uni.showToast({
						title: '请正确填写注册信息!',
						icon: 'none',
						duration: 2000
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../commons/css/style.scss';
	.top-bar {
		justify-content: flex-start;
		.top-bar-left {
			width: 88rpx;
			height: 88rpx;
			line-height: 88rpx;
			padding-left:10rpx;
			image {
				margin: 21rpx 0 0 21rpx;
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.logo {
		text-align: center;
		image {
			padding-top: 160rpx;
			width: 300rpx;
			height: 300rpx;
		}
	}

	.main {
		padding: 54rpx $uni-spacing-row-lg 120rpx;
		.title {
			font-size: 50rpx;
			font-weight: 600;
			color: $uni-text-color;
		}
		.inputs {
			padding-top: 8rpx;
			.input-div {
				position: relative;
				.att {
					position: absolute;
					top: 40rpx;
					right: 0;
					font-size: $uni-font-size-base;
					font-weight: 600;
					color: red;
				}
				.is {
					position: absolute;
					top: 40rpx;
					right: 0;
					width: 42rpx;
					height: 42rpx;
				}
			}
			input {
				height: 88rpx;
				line-height: $uni-text-color;
				font-size: $uni-font-size-lg;
				color: $uni-text-color;
				font-weight: 500;
				border-bottom: 1px solid $uni-border-color;
			}
		}
	}
	.look {
		font-size: $uni-font-size-base;
		font-weight: 600;
	}
	.submit {
		width: 520rpx;
		height: 96rpx;
		margin: 0 auto;
		background: #333333;
		border-radius: 48rpx;
		color: #FFFFFF;
		font-size: $uni-font-size-lg;
		font-weight: 600;
		line-height: 96rpx;
		text-align: center;
	}
</style>
